doctype html
html(lang='en')
    head
        title= title
        meta(char-set='UTF-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/stylesheets/weui.min.css')
        script(src='./javascripts/jquery-2.2.0.min.js')
        //-头部左侧菜单按钮
        mixin headerLeft(menus)
            .weui_btn_area#showActionSheet.fl
                a.weui_btn.weui_btn_primary(href="javascript:") 菜&nbsp;&nbsp;&nbsp;&nbsp;单
            #actionSheet_wrap
                #mask.weui_mask_transition
                #weui_actionsheet.weui_actionsheet(style='border-radius:5px')
                    .weui_actionsheet_menu
                        each menu in menus
                            a.weui_btn.weui_btn_primary(href="#{menu.href}")=menu.content
                    .weui_actionsheet_action
                        .weui_actionsheet_cell#actionsheet_cancel 取消
            script.
                $('#showActionSheet').bind('click',function () {
                    var mask = $('#mask');
                    var weuiActionsheet = $('#weui_actionsheet');
                    weuiActionsheet.addClass('weui_actionsheet_toggle');
                    mask.show().addClass('weui_fade_toggle').click(function () {
                        hideActionSheet(weuiActionsheet, mask);
                    });
                    $('#actionsheet_cancel').click(function () {
                        hideActionSheet(weuiActionsheet, mask);
                    });
                    weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

                    function hideActionSheet(weuiActionsheet, mask) {
                        weuiActionsheet.removeClass('weui_actionsheet_toggle');
                        mask.removeClass('weui_fade_toggle');
                        weuiActionsheet.on('transitionend', function () {
                            mask.hide();
                        }).on('webkitTransitionEnd', function () {
                            mask.hide();
                        })
                    }
                })
        //-头部右侧主页按钮
        mixin headerRight()
            .weui_btn_area.fr
                a.weui_btn.weui_btn_primary(href="/logout") 退&nbsp;&nbsp;&nbsp;&nbsp;出
        //-头部菜单按钮和主页按钮
        mixin header(menus)
            div
                +headerLeft(menus)
                +headerRight()
            .cb
        //-画面名字
        mixin pageName(pageName)
            .cb.weui_btn_area
                div.pageName=pageName
                div.line2
        //-底部公司信息
        mixin footer()
            .cb.cm
                p Copyright©2016 Two2Two Technology Co ., Ltd
        //-快件信息
        mixin expressInfo(leftCount)
            .cb.weui_btn_area
                p 您还有#{leftCount}件快递未投递！
        //-快递员信息
        mixin courierInfo(sumCount)
            .cb.weui_btn_area
                p 共有#{sumCount}个快递投递员！
        //-错误信息
        mixin errorArea(errorInfo)
            .weui_btn_area.error
                p#errorInfo=errorInfo
        //-表中单条记录
        mixin record(rowIndex,row,colEnNames)
            -
                var i=0;
                var colEnName;
                var value;
            tr
                while i<colEnNames.length
                    -
                        colEnName=colEnNames[i];
                        value=row[colEnName];
                        id=colEnName+rowIndex;
                        i++;
                    td.cm(id='#{id}')=value
        //-表模板
        mixin lst(rows,colCnNames,colEnNames,key)
            -
                var i=0;
                var j=0;
                var m=0;
                var colCnName;
                var colEnName;
                var value;
            .weui_cell.oh
                .w100.oxs
                    table.w100.bcc.os(key='#{key}')
                        //-表列名
                        tr
                            while i<colCnNames.length
                                -
                                    colCnName=colCnNames[i]
                                    i++;
                                th.cm=colCnName
                        //-数据行
                        while j<rows.length
                            +record(j,rows[j++],colEnNames)
            input(type='hidden',id='selectedItem',name='selectedItem',isMust='true')
        //-文本输入单元
        mixin cellText(colCnName,colEnName,placeholder,value,isMust,colType)
            .weui_cell.oh
                .weui_cell_hd
                    label.weui_label.wsp=colCnName
                .weui_cell_bd.weui_cell_primary
                    if value
                        input.ml10.weui_input(type="text",name='#{colEnName}',id='#{colEnName}',placeholder="#{placeholder}",value='#{value}',isMust='#{isMust}',colType='#{colType}')
                    else
                        input.ml10.weui_input(type="text",name='#{colEnName}',id='#{colEnName}',placeholder="#{placeholder}",isMust='#{isMust}',colType='#{colType}')
        //-文本显示单元
        mixin cellLabel(colCnName,value)
            .weui_cell.oh
                .weui_cell_hd
                    label.weui_label.wsp=colCnName
                .weui_cell_bd.weui_cell_primary
                    span.ml10.label=value
        //-密码输入单元
        mixin cellPwd(colCnName,colEnName,placeholder,value,isMust)
            .weui_cell.oh
                .weui_cell_hd
                    label.weui_label.wsp=colCnName
                .weui_cell_bd.weui_cell_primary
                    if value
                        input.ml10.weui_input(type="password",name='#{colEnName}',id='#{colEnName}',placeholder="#{placeholder}",value='#{value}',isMust='#{isMust}')
                    else
                        input.ml10.weui_input(type="password",name='#{colEnName}',id='#{colEnName}',placeholder="#{placeholder}",isMust='#{isMust}')
        //-信息显示单元
        mixin cellInfo(info)
            .weui_btn_area
                p=info
        //-单选控件单元
        mixin radioCell(header,items,values,selectedItem)
            .weui_cells_title=header
            .weui_cells.weui_cells_radio
                -
                    var item;
                    var value;
                    var i=0;
                    var ctlId;
                while i<items.length
                    -
                        item=items[i];
                        value=values[i];
                        ctlId='x' + i;
                        i++;
                    label.weui_cell.weui_check_label(for="#{ctlId}")
                        .weui_cell_bd.weui_cell_primary
                            p=item
                        .weui_cell_ft
                            input.weui_check(type="radio",name="cabType",id="#{ctlId}",value='#{value}')
                            span.weui_icon_checked
        //-单个按钮
        mixin btnSingle(btnName,href)
            div.fl.w100
                .weui_btn_area
                    a.weui_btn.weui_btn_primary(href="#{href}",id='btnSingle')=btnName
        //-底部弹出菜单
        mixin menuBottom(menus)
            .weui_btn_area
                each menu in menus
                    a.weui_btn.weui_btn_primary(href="#{menu.href}")=menu.content
        //-底部按钮
        mixin btnBottom(btnLeftName,hrefLeft,typeLeft,btnRightName,hrefRight,typeRight)
            div.fl.w50
                .weui_btn_area
                    if typeLeft==='button'
                        a.weui_btn.weui_btn_primary(href="#{hrefLeft}",id='btnBottomLeft')=btnLeftName
                    else if typeLeft==='submit'
                        a.weui_btn.weui_btn_primary(href="#",id='btnBottomLeft')=btnLeftName
            div.fr.w50
                .weui_btn_area
                    if typeRight==='button'
                        a.weui_btn.weui_btn_primary(href="#{hrefRight}",id='btnBottomRight')=btnRightName
                    else if typeRight==='submit'
                        a.weui_btn.weui_btn_primary(href="#",id='btnBottomRight')=btnRightName
            input(type='hidden',name='cmdType',id='cmdType')
        //-收件人电话号码，姓名快捷录入
        mixin reTelName()
            div.telname#hideTelName
            script.
                var hideTelName=document.getElementById('hideTelName');
                var txtTel=document.getElementById('expReTel');
                var txtName=document.getElementById('expReName');
                txtTel.addEventListener('input',showHide); 
                
                //显示快捷录入一览
                function showHide(){
                    if((!txtTel.value) || txtTel.value.trim().length!=4){
                        hideTelName.style.display='none';
                        hideTelName.innerHTML=null;
                        return;
                    }
                    
                    var xhr=new XMLHttpRequest();
                    xhr.onreadystatechange=function(){
                        if(xhr.readyState==4){
                            if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
                                if(!xhr.responseText || xhr.responseText.length===0){
                                    return;
                                }
                                hideTelName.style.display='block';
                                hideTelName.innerHTML=xhr.responseText;
                                var table=document.getElementsByTagName('table')[0];

                                if(table){
                                    table.onclick=null;
                                    Array.prototype.slice.apply(table.rows).forEach(function(row){
                                        row.onclick=null;
                                        row.addEventListener('click',function(){
                                            if(row.rowIndex!==row.parentElement.rows.length-1){
                                                row.classList.add('selected');
                                                txtTel.value=row.cells[1].innerText;
                                                txtName.value=row.cells[0].innerText;
                                            }
                                            
                                            hideTelName.style.display='none';
                                            hideTelName.innerHTML=null;
                                        });
                                    });
                                }
                            }
                        }
                    }

                    xhr.open('get','/reTelName?tel4='+txtTel.value.trim(),true);
                    xhr.send(null);
                }
    body
        block pageHeader
        block header
        +errorArea(errorInfo)
        block content
        +footer()
        script(src='./javascripts/common.js')